<template>
  <ul class="v-select-group__wrap">
    <li class="v-select-group__title" v-show="visible">{{ label }}</li>
    <li>
      <ul class="v-select-group">
        <slot></slot>
      </ul>
    </li>
  </ul>
</template>

<script>
  import Emitter from '@/vuego/mixins/emitter';

  export default {
    name: 'VOptionGroup',
    componentName: 'VOptionGroup',
    mixins: [Emitter],
    props: {
      label: String,
      disabled: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        visible: true,
      };
    },
    watch: {
      disabled(val) {
        this.broadcast('VOption', 'handleGroupDisabled', val);
      },
    },
    methods: {
      queryChange() {
        this.visible = this.$children &&
          Array.isArray(this.$children) &&
          this.$children.some(option => option.visible === true);
      },
    },
    created() {
      this.$on('queryChange', this.queryChange);
    },
    mounted() {
      if (this.disabled) {
        this.broadcast('VOption', 'handleGroupDisabled', this.disabled);
      }
    },
  };
</script>
